<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/page/base.jsp"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="d" uri="/doone-comm-ui-tags"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<link type="text/css" href="<%=path%>/manage/css/layout.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="<%=path%>/manage/css/Tooltip.css" />
		<script type="text/javascript" src="<%=path%>/manage/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/easyTooltip.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/errorTip.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery.wysiwyg.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/hoverIntent.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/superfish.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/custom.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery-ui-1.8.11.custom.min.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/Tooltip.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery.validate.methods.min.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery.validate.defaults.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/My97DatePicker/WdatePicker.js"></script>
		<!-- End of Libraries -->
		<style type="text/css">
			#selectGroup div {margin:5px auto;}
			#groups {margin-bottom:10px;}
			#groups span {margin-right:10px;}
			.userDataShow {}
			.userDataHide {display: none;}
			#pagNav a {text-decoration:none;}
		</style>

<script language="javascript" type="text/javascript">
	$(document).ready(function() {
		//加载dialog
		$("#addSearch").dialog({
			autoOpen : false,
			width : 300,
			height : 200,
	       draggable:false,
	       resizable:false,
			modal : false,			
			close : function() {
				$("#addPnsGroupForm")[0].reset();
			}
		});
		
		//全部选择
		 $("#allPicker").click(function(){  
		  $("input[name='ckUserBox']").each(function(){
		   $(this).attr("checked",true);
		  });  
		 });
		 //取消选择
		 $("#delAll").click(function(){  
		  $("input[name='ckUserBox']").each(function(){
		   $(this).attr("checked",false);
		  });  
		 });
		 //反向选择
		 $("#antiAll").click(function(){
		  $("input[name='ckUserBox']").each(function(){
		   $(this).attr("checked",!this.checked);              
		     });
		});
		
		$("#popupSearchCloseBtn").click(function(){
			$("#addGroup").hide();
		});
		$("#groupName").blur(function(){
			if($(this).val() == ""){
				$(this).addErrorMessage("请输入群组名称");
			} else if ($(this).val().length > 10) {
				$(this).addErrorMessage("最大长度10");
			} else {
				$(this).removeErrorMessage();
			}
		});
		
	});
	function openDialog(){
		$("#addGroup").show();
		$("#update_activeStartTime").val("");
		$("#update_activeEndTime").val("");
		$("#DatePicker").hide();
	}
	//点击，关闭选择，赋值
	function closeDiv(obj,type){
		var value=$(obj).text();
		if($("#delCondition1").length>0){
			$("#delCondition1").html(value);
			$("#deviceType").val(type);
			$("#addGroup").hide();
			return;
		}
		$("#conditionSearch").append("<span title='单击删除' id='delCondition1' style='font-size:12px;margin-right:10px;cursor:pointer;' onclick='delCondition(this,"+type+")'>"+value+"</span>");	
	
		$("#deviceType").val(type);
		$("#addGroup").hide();
	}

	//
	function delCondition(obj, type) {
		if (type == 2) {
			$("#all").val("");
		} else {
			$("#deviceType").val("");
		}
		if (type == 5) {
			$("#createStartDate").val("");
		} else if (type == 6) {
			$("#createEndDate").val("");
		}
		$(obj).remove();

	}
	//获取目标用户信息
	function seachUser() {
		$.ajax({
					url : root+	'/pns/getTargetUserGroupInfo.action',
					method : 'post',
					dataType : 'json',
					data : {
						'condition.deviceId' : "",// $("#deviceId").val(),
						'condition.deviceType' : $("#deviceType").val(),
						'condition.type' : $("#all").val(),
						'condition.createStartDate' : $("#createStartDate").val(),
						'condition.createEndDate' : $("#createEndDate").val()
					},

					success : function(data) {
						//alert(search);

						//用户ID 设备ID，设备类型，注册时间
						//打开dialog
						if (data != '') {

							$("#userTab tbody").remove();

							userinfo = data.userList;
							var type = "";
							var total = userinfo.length;
							for (i = 0; i < total; i++) {

								if (userinfo[i][2] == 0) {
									type = "android";
								} else if (userinfo[i][2] == 1) {
									type = "ios";
								}
								var msg = "";
								if (i < pageNo) {
									msg = "<tr class='userDataShow'>";
								} else {
									msg = "<tr class='userDataHide'>";
								}
								msg = msg + "<td><input type='checkbox' name='ckUserBox' value="+userinfo[i][0]+"></td><td>"
														+ userinfo[i][0]
														+ "</td><td>"
														+ userinfo[i][1]
														+ "</td><td>"
														+ type
														+ "</td><td>"
														+ userinfo[i][3]
														+ "</td></tr>";
							   $("#userTab").append(msg);				
							}
							$("#pageRecord").html("总:"+total+"条  每页显示 "+pageNo+"条");
							$("#pagNav").show();
						}
					},
					error : function(err) {
						if (err.responseText != '')
							alert(err.responseText);
						else
							alert("请求失败！");
					}
				});
	}
	var pageNo = 5;	
	function showNextPage() {
		if($(".userDataShow:last").nextAll("tr").length <= 0){
			//最后一页
			return;
		}
		$(".userDataShow").each(function(i){
			if(i==(pageNo-1)){
				$(this).nextAll("tr").each(function(k,element) {
					$(element).attr("class","userDataShow");
					if(k==(pageNo-1)){
						return false;
					}
				});
			}
			$(this).attr("class","userDataHide");
		});
	}
	
	function showPrePage() {
		if($(".userDataShow:first").prevAll("tr").length <= 0){
			//首页
			return;
		}
		$(".userDataShow").each(function(i){
			if(i==0){
				$(this).prevAll("tr").each(function(k,element) {
					$(element).attr("class","userDataShow");
					if(k==(pageNo-1)){
						return false;
					}
				});
			}
			$(this).attr("class","userDataHide");
		});
	}
	
	function showFistPage() {
		if($(".userDataShow:first").prevAll("tr").length <= 0){
			//首页
			return;
		}
		$(".userDataShow").each(function(i){
			if(i==0){
				var preLength = $(this).prevAll("tr").length-pageNo;
				$(this).prevAll("tr").each(function(k,element) {
					if(k>=preLength){
						$(element).attr("class","userDataShow");
					}
				});
			}
			$(this).attr("class","userDataHide");
		});
	}
	
	function showLastPage() {
		if($(".userDataShow:last").nextAll("tr").length <= 0){
			//最后一页
			return;
		}
		$(".userDataShow").each(function(i){
			if(i==(pageNo-1)){
				var nextLength = $(this).nextAll("tr").length;
				var no = nextLength%pageNo;
				var temp = no==0?nextLength-no-pageNo:nextLength-no;
				$(this).nextAll("tr").each(function(k,element) {
					if(k>=temp){
						$(element).attr("class","userDataShow");
					}
				});
			}
			$(this).attr("class","userDataHide");
		});
	}
	
	function openDate(obj) {
		$("#DatePicker").show();
	}
	function saveCondition(obj, type) {
		var value = $(obj).val();
		if($("#timeCondition"+type).length>0){
			$("#timeCondition"+type).html(value);
		} else {
			$("#conditionSearch").append(
				"<span title='单击删除'id='timeCondition"+type+"' style='font-size:12px;margin-right:10px;cursor:pointer;' onclick='delCondition(this,"+type+")'>" + value
						+ "</span>");
		}

		//给隐藏变量赋值  开始时间
		if (type == 5) {
			$("#createStartDate").val(value);
		} else if (type == 6) {
			$("#createEndDate").val(value);
		}
	}
	
	var saveGroupCount="";
	
	//ajax 删除组  通过组的名称
	//pe 1 是已经存在的组，type 2 ：刚刚加的组
	function delGroupByName(groupId){
	 if (confirm("是否确认删除该组")) {				
	      $.ajax({
				url : "<%=path%>" + '/pns/delGroup.action',
				method : 'post',
				dataType : 'json',
				data : {
					'pnsGroup.groupId' : groupId,
					'pnsGroup.messageId' : $("#messageId").val()				
				},
				success : function(data) {
	                alert("删除成功");
	                $("#mangeGroup"+groupId+"").remove();
				},
				error : function(err) {
					if (err.responseText != '')
						alert(err.responseText);
					else
						alert("请求失败！");
				}
			});
		
		} else {
			return false;
			}
	}


	//保存群和用户的关系
	function saveUserGroup() {
		$("#userGroupBtn").attr("disabled",true);
		var userIds = "";
		//更改群组名称
		if ($("#groupName").val() == "") {
			$("#groupName").addErrorMessage("请输入群组名称");
			$("#groupName").focus();
			$("#userGroupBtn").attr("disabled",false);
			return;
		} else if ($("#groupName").val().length > 10) {
			$("#groupName").addErrorMessage("最大长度10");
			$("#groupName").focus();
			$("#userGroupBtn").attr("disabled",false);
			return;
		} else {
			$("#groupName").removeErrorMessage();
			// return;
		}
		$("input[name='ckUserBox']:checkbox:checked").each(function() {
			userIds += $(this).val() + ',';
		});
		//是否选择用户
		if (userIds == "") {
			alert("请选择用户");
		} else {
			$.ajax({
				url : root + '/pns/saveGroup.action',
				method : 'post',
				dataType : 'json',
				async: false,
				data : {
					'pnsGroup.groupName' : $("#groupName").val(),
					'pnsGroup.messageId' : $("#messageId").val(),
					'userIds' : userIds
				},
				success : function(data) {					
					if(data>0){
						alert("添加成功");
						$("#groupIds").val($("#groupIds").val() + data + ",");
					 	var name = $("#groupName").val();
				  		var newGroup = "<span id='mangeGroup"+data+"'><span style='font-size:12px;'>"+name+"</span><img onclick='delGroupByName("+data+")' src='<%=path %>/images/delete.png' style='position:relative;top:-5px;left:-10px;width:12px;height:12px;cursor:pointer;' /></span>";
				  		$("#groups").append(newGroup);
				  		$("#groupName").val("");
				  		document.getElementsByTagName('body')[0].scrollTop=0;
					}
				},
				error : function(err) {
					if (err.responseText != '')
						alert(err.responseText);
					else
						alert("请求失败！");
				}
			});
		}
		$("#userGroupBtn").attr("disabled",false);
	}
	//将信息和组保存

	function saveMsgGroup() {
		var goupIds = $("#groupIds").val();
		if (goupIds == "") {
			alert("请至少保存一个群组");
			return false;
		} else {
			$("#addPnsGroupForm").submit();
		}

	}
</script>
</head>
	<body>
		<p class="sitemap">
			当前位置：内容管理 > 群组管理
		</p>
		<h1>
			群组管理
		</h1>
		<div>
			<div class="pad20"">
				<!--<div>系统默认群组<input type="button" value="all" ><input type="button" value="ios" ><input type="button" value="all" ></div>-->
				<div id="groups">
					<s:iterator value="groupInfo">					    
					    <span id="mangeGroup<s:property value="groupId" />">
					    	<span style="font-size:12px;"><s:property value="groupName" /></span>
					    	<img onclick="delGroupByName('<s:property value="groupId" />')" src="<%=path %>/images/delete.png" style="position:relative;top:-5px;left:-14px;width:12px;height:12px;cursor:pointer;" />
					    </span>
				    </s:iterator>
				</div>
				<div id="selectGroup">
					<div id="newGroupNameArea">
						请输入群组名称:<input type='text' id='groupName'>
					</div>
					<div id="conditionSearch">
						<input type="button" onclick="openDialog()" value="添加筛选条件">
						<input type="button" onclick="seachUser()" value="检索"
							style="float: right">
					</div>
					<div style="position: relative;">
						<div
							style="width: 300px; height: 200px; position: absolute; border: 1px solid #333333; display: none; z-index: 5; background: #ffffff"
							id="addGroup">
							<ul>
								<li>
									<a onclick="closeDiv(this,1)"
										style="font-size: 16px; border: 0px solid #333333;">ios</a>
								</li>
								<li>
									<a onclick="closeDiv(this,0)"
										style="font-size: 16px; border: 0px solid #333333;">android</a>
								</li>
								<li>
									<a onclick="openDate(this)"
										style="font-size: 16px; border: 0px solid #333333;">注册时间</a>
								</li>
								<li>
									<div id="DatePicker" style="display: none">
										<ul>
											<li>
												开始时间：
												<input type="text" id="update_activeStartTime"
													name="msgDto.startDate" readonly="readonly"
													onClick="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',maxDate:'#F{$dp.$D(update_activeEndTime)}'})"
													onchange="saveCondition(this,5)">
											</li>
											<li>
												结束时间：
												<input type="text" id="update_activeEndTime"
													name="msgDto.expireDate" type="text" readonly="readonly" 
													onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(update_activeStartTime)}'})"
													onchange="saveCondition(this,6)">
											</li>
										</ul>
									</div>
								</li>
							</ul>
							<div>
							</div>
							<span id="popupSearchCloseBtn" style="cursor:pointer;top: 180px; left: 265px; position: absolute; ">close</span>
						</div>

						<div>
							<form action="<%=path%>/pns/saveMsgGroup.action" method="post"
								id="addPnsGroupForm" enctype=multipart/form-data>
								<input type="hidden" id="all" name="all">
								<input type="hidden" id="deviceType" name="deviceType">
								<input type="hidden" id="createStartDate" name="createStartDate">
								<input type="hidden" id="createEndDate" name="createEndDate">
								<s:hidden id="groupIds" name="groupIds"></s:hidden>
								<s:hidden id="messageId" name="messageId"></s:hidden>
								<table class="fullwidth" cellpadding="0" cellspacing="0"
									border="1" id="userTab">
									<thead>
										<tr>
											<td width="50px"></td>
											<td width="80px">
												用户ID
											</td>
											<td>
												设备ID
											</td>
											<td>
												用户类型
											</td>
											<td width="100px">
												创建时间
											</td>
										</tr>
									</thead>
									<tbody></tbody>
								</table>
								<div id="pagNav" style="display:none">
									<input type="button" value="全选" id="allPicker" />
									<input type="button" value="全不选" id="delAll" />
									<input type="button" value="反选" id="antiAll" />
									<span id="pageRecord"></span>
									<a href="#" onclick="showFistPage()">[首页]</a>
									<a href="#" onclick="showPrePage()">[上一页]</a>
									<a href="#" onclick="showNextPage()">[下一页]</a>
									<a href="#" onclick="showLastPage()">[最后一页]</a>
								</div>
								<input type="button" id="userGroupBtn" value="保存群组" onclick="saveUserGroup()" />
								<input type="button" value="保存" onclick="saveMsgGroup()" />
							</form>
						</div>

					</div>
				</div>
				<hr />
			</div>
		</div>
	</body>
</html>
